import Image from 'next/image'
import Hero from '@/components/home/Hero'
import { useEffect, useState } from 'react'
import axios from 'axios'
import Carousel from '@/components/common/Carousel'
import PageMetaTags from '@/containers/PageMetaTags'
import Link from 'next/link'
import { useRouter } from 'next/router';
import withTranslate from '@/hocs/withTranslate'

const imageSrc = ['/images/index/top1.jpg', '/images/index/top2.jpg', '/images/index/top3.png'];

const news = [
  {
    date: '2024.12.15',
    title: '佐々木葉教授・修士2年 太田恭平さん・修士1年 塩山祈さん・中野太雄さん・藤本秀哉さんが第20回 土木学会 景観・デザイン研究発表会にて発表しました。塩山さん・藤本さんは優秀講演賞を受賞しました。'
  },
  {
    date: '2024.12.15',
    title: '佐々木葉教授・修士2年 太田恭平さん・修士1年 塩山祈さん・中野太雄さん・藤本秀哉さんが第20回 土木学会 景観・デザイン研究発表会にて発表しました。塩山さん・藤本さんは優秀講演賞を受賞しました。'
  },
  {
    date: '2024.12.15',
    title: '佐々木葉教授・修士2年 太田恭平さん・修士1年 塩山祈さん・中野太雄さん・藤本秀哉さんが第20回 土木学会 景観・デザイン研究発表会にて発表しました。塩山さん・藤本さんは優秀講演賞を受賞しました。'
  },
  {
    date: '2024.12.15',
    title: '佐々木葉教授・修士2年 太田恭平さん・修士1年 塩山祈さん・中野太雄さん・藤本秀哉さんが第20回 土木学会 景観・デザイン研究発表会にて発表しました。塩山さん・藤本さんは優秀講演賞を受賞しました。'
  },
  {
    date: '2024.12.15',
    title: '佐々木葉教授・修士2年 太田恭平さん・修士1年 塩山祈さん・中野太雄さん・藤本秀哉さんが第20回 土木学会 景観・デザイン研究発表会にて発表しました。塩山さん・藤本さんは優秀講演賞を受賞しました。'
  }
]

function Home({t}) {
  const [datas, setDatas] = useState([])
  const router = useRouter()

  const loadSavedImages = async () => {
      const response = await axios.post('/api/news/list', { page: 1, size: 10 })
      setDatas(response.data.data)
  } 

  useEffect(() => {
      loadSavedImages()
  }, [])

  return (
    <>
      <PageMetaTags title="Home" description={""} url="" />
      <div itemScope itemType="https://schema.org/WebSite">
        <meta itemProp="url" content="https://www.webdesignai.com/" />
        <meta itemProp="name" content="Web Design AI" />
      </div>
      <Carousel urls={imageSrc} />
      <Hero />
      <div className='grid place-items-center w-full pb-10'>
        <div className='w-3/4' id='news'>
          <h1 className="text-2xl font-bold mt-10">研究室日記</h1>
          <div className="divider"></div>
          <div className="overflow-x-auto">
            <table className="table">
              {/* head */}
              <thead>
                <tr>
                  <th className="w-100"></th>
                  <th className='text-lg font-bold w-100'>{t('table.date')}</th>
                  <th className='text-lg font-bold w-full'>{t('table.title')}</th>
                </tr>
              </thead>
              <tbody>
                {
                  datas.map((n, k) => {
                    return (
                      <tr key={k} 
                          onClick={() => router.push('/news-detail?id='+n._id)}
                          className="hover:bg-blue-50 cursor-pointer">                     
                        <th className="w-100">
                          <img src={'http://'+window.location.hostname+':8089/'+n.url} className="w-16 h-16 rounded-lg object-cover" />
                        </th>
                        <td className="w-100">{new Date(n.created).toLocaleDateString()}</td>
                        <td className="w-full">
                          <div className="marquee-container">
                            <div className="marquee-content text-lg">
                              {n.title}
                            </div>
                          </div>
                        </td>
                      </tr>
                    )
                  })
                }
              </tbody>
            </table>
            <div className='text-right pt-2'>
              <Link href='/research-news' className="text-blue-500 hover:underline">{t('table.more')}</Link>
            </div>
          </div>
        </div>
      </div>



    </>
  )
}

export default withTranslate(Home)
